<template>
  <view
    class="goodsList-content-item"
    @tap="handleClick(goods.id, goods.sellerId === memberId)"
  >
    <view class="goods-img">
      <img :src="goods.goodsImgs[0]" />
      <!-- <img src="https://xinlong-shop.oss-cn-beijing.aliyuncs.com/goods/20221208/95fef867-926e-4bc8-a19e-45f950fc9a05.jpg" /> -->
    </view>
    <view class="goods-content">
      <view class="goods-name">{{ goods.goodsName }}</view>

      <view class="goods-price tn-color-main"
        ><span>￥</span
        >{{ goods.price ? formatPrice(goods.price, 2) : "0.00" }}</view
      >
    </view>
    <view class="goods-sell-out" v-if="goods.status != 0">
      <img src="@/static/images/sell-out.png" mode="widthFix" />
    </view>
    <view class="goods-self tn-color-main" v-if="goods.sellerId === memberId">
      归属本人商品，无法抢购
    </view>
  </view>
</template>

<script lang="ts" setup>
import {} from "vue";
import { PurchaseDetail } from "../types";

import { formatPrice } from "@/tuniao-ui/utils";

/** Props */
type Props = {
  goods: PurchaseDetail;
  memberId: number;
};

const props = defineProps<Props>();
const emits = defineEmits({
  /** 点击事件 */
  click: (index: string | number) =>
    typeof index === "string" || typeof index === "number",
});
// 处理点击事件
const handleClick = (index: number, isSelf: boolean) => {
  // 不是自己的商品才能触发
  if (!isSelf) {
    emits("click", index);
  }
};
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true,
  },
};
</script>

<style lang="scss" scoped>
.goodsList-content-item {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  margin: 20rpx;
  width: 335rpx;
  //height: 480rpx;
  position: relative;
  .goods-sell-out {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0.6;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 100%;
    }
  }
  .goods-self {
    font-size: 15rpx;
    text-align: center;
  }
  .goods-img {
    img {
      width: 100%;
    }
  }

  .goods-content {
    padding: 0rpx 20rpx 10rpx 20rpx;
    .goods-tag {
      &-item {
        margin-right: 10rpx;
      }
      &-item:nth-child(even) {
        background-color: rgb(32, 96, 48);
      }
    }
    .goods-brand {
      font-weight: bold;
    }
    .goods-name {
      font-size: 24rpx;
    }

    .goods-desc {
      font-size: 22rpx;
      // color: #CCA220;
    }

    .goods-price {
      margin-top: 20rpx;
      font-weight: bold;
      font-size: 30rpx;
      span {
        font-size: 25rpx;
      }
    }
  }
}
</style>
